<template>
	<view>
		<u-navbar :is-back="false" back-icon-color="#ffffff" title="我的购物车" title-color="#ffffff" :background="background"></u-navbar>
		<view class="cart-top">
			<view class="left">悦彩生鲜</view>
			<view class="right" @tap="goMenu()">
				<view v-if="totlePrice <= 100">
					订单金额还不够
					<text>
						去凑单
						<u-icon name="arrow-right"></u-icon>
					</text>
				</view>
				<view v-else>
					<text>
						已免运费，去逛逛
						<u-icon name="arrow-right"></u-icon>
					</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="empty" v-if="carList.length == 0"><u-empty text="购物车为空" mode="car"></u-empty></view>
			<!-- 		<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in carList" :key="item.id" :name="item.id">
					{{item.name}}
				</u-checkbox>
			</u-checkbox-group> -->
			<uni-swipe-action>
				<uni-swipe-action-item :options="options" @click="onClick" @change="change" v-for="(item, index) in carList" :key="item.id">
					<!-- <uni-swipe-action-item :options="options" @click="onClick" @change="change"> -->
					<view class="checkbox-item">
						<view class="item u-border-bottom">
							<view class="item-top">
								<view class="item-checkbox" @click="check(index)">
									<view v-if="item.checked == true"><u-icon name="checkmark-circle-fill" color="#19be6b" size="48"></u-icon></view>
									<view v-else><u-icon name="checkmark-circle" color="#c8c9cc" size="48"></u-icon></view>
								</view>
								<view class="item-image">
									<image v-if="item.image" mode="aspectFill" :src="item.image" />
									<image v-else mode="aspectFill" src="https://uviewui.com/common/logo.png" />
								</view>
								<view class="title-wrap">
									<view class="title u-line-1">{{ item.name }}</view>
									<view class="price">
										￥{{ item.sellPrice }}
										<text class="unit">/{{ item.specValues }}</text>
									</view>
								</view>
							</view>
							<view class="item-bottom">
								<view class="number-box">
									<u-number-box
										color="#19be6b"
										:input-height="38"
										:size="24"
										:min="1"
										:index="item.skuId"
										v-model="item.goodsNumber"
										@plus="valChange"
										@minus="valChange"
										:disabled-input="true"
									></u-number-box>
								</view>
							</view>
						</view>
						<u-gap height="10" bg-color="#f3f4f6"></u-gap>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<u-gap height="30" bg-color="#f3f4f6"></u-gap>
		<view class="foot-wrap">
			<view class="left">
				合计:
				<text>￥{{ totlePrice }}</text>
			</view>
			<view class="right"><u-button type="warning" shape="circle" size="medium" :disabled="false" @click="creatOrder()">提交订单</u-button></view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
export default {
	components: {
		uniSwipeAction,
		uniSwipeActionItem
	},
	data() {
		return {
			//头部颜色
			background: {
				backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			//价格合计
			totlePrice: 0,
			//购物车列表
			carList: [],
			//滑动操作
			show: false,
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#fa3534'
					}
				}
			],
			//
			userInfo: {},
			//
			checkboxList: []
		};
	},
	onLoad() {
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				this.userInfo = uni.getStorageSync('userInfo');
				console.log('this.userInfo==========');
				console.log(this.userInfo);
				if(!this.userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
		console.log('onLoad');
		this.getCarList();
	},
	onShow() {
		console.log('onShow');
		this.getCarList();
	},
	methods: {
		//
		getCarList() {
			let _t = this;
			_t.$u.api.getCarList().then(res => {
				_t.carList = res.data.content;
				_t.carList.forEach(function(item) {
					_t.$set(item, 'checked', true);
				});
				_t.sumPrices();
				console.log('carList=======');
				console.log(_t.carList);
			});
		},
		sumPrices() {
			let sumPrice = 0;
			this.carList.forEach(function(item, index, input) {
				let sumItemPrice = 0;
				if (item.checked == true) {
					sumItemPrice = item.sellPrice * item.goodsNumber;
				}
				sumPrice = sumPrice + sumItemPrice;
			});
			this.totlePrice = sumPrice;
		},
		valChange(e) {
			console.log(e);
			console.log(e.value);
			console.log(e.index);
			this.sumPrices();
			this.addCar(e.index, e.value);
			//console.log(e.target.skuId);
		},
		//加入购物车
		addCar(skuId, goodsNumber) {
			this.$u.api.postAddCar({ skuId: skuId, goodsNumber: goodsNumber }).then(res => {
				if (res.statusCode == 200) {
					this.$refs.uToast.show({
						title: '添加成功!',
						type: 'success'
					});
				}
			});
		},
		//移出购物
		delCar(carId) {
			this.$u.api.delAddCar({ id: carId }).then(res => {
				console.log(res);
				if (res.statusCode == 200) {
					this.$refs.uToast.show({
						title: '移出购物！',
						type: 'success'
					});
				}
			});
		},
		click(index) {
			console.log('this.carList');
			console.log(this.carList);
			this.delCar(this.carList[index].id);
			this.carList.splice(index, 1);
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			console.log(index);
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.carList[index].show = true;
			this.carList.map((val, idx) => {
				if (index != idx) this.carList[idx].show = false;
			});
		},
		goMenu() {
			this.$u.route({
				type: 'tab',
				//params: this.params,
				url: '/pages/menu/index'
			});
		},
		creatOrder() {
			let _t = this;
			if (_t.userInfo.realName == false) {
				_t.$refs.uToast.show({
					title: '当前用户未认证，无法查看更多内容',
					type: 'error'
				});
			} else {
				console.log('_t.carList');
				let catIds = [];
				_t.carList.forEach(function(item, index, input) {
					if (item.checked == true) {
						catIds.push(item.id);
					}
				});
				console.log(catIds);
				if (catIds.length > 0 && _t.totlePrice > 0) {
					/* var catIds = new Array();
					carListData.forEach(function(item, index, input) {
						let sumItemPrice = 0;
						catIds[index] = item.id;
					}); */
					var catIdss = catIds.toString();
					/* console.log(catIdss); */
					console.log(catIdss);
					/* uni.navigateTo({
					    url: '/pages/order/creatOrder?catIds='+catIds
					}); */
					_t.removeStorageSync();
					_t.$u.route({
						type: 'to',
						params: { catIds: catIdss },
						url: '/pages/order/creatOrder'
					});
				} else {
					_t.$refs.uToast.show({
						title: '警告：购物车为空,无法提交订单',
						type: 'error'
					});
				}
			}
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			console.log(e);
		},
		//
		onClick(e) {
			console.log('this.carList');
			console.log(this.carList);
			this.delCar(this.carList[e.index].id);
			this.carList.splice(e.index, 1);
			console.log('当前点击的是第' + e.index + '个按钮，点击内容是' + e.content.text);
			this.sumPrices();
		},
		change(open) {
			console.log('当前开启状态：' + open);
		},
		//
		removeStorageSync() {
			uni.removeStorageSync('order_coupon_list');
			uni.removeStorageSync('order_select_coupon_index');
			uni.removeStorageSync('cart_ids');
		},
		//点击选择框
		check(index) {
			let _t = this;
			_t.carList[index].checked = !_t.carList[index].checked;
			console.log(_t.carList);
			console.log(index);
			_t.sumPrices();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
}
.cart-top {
	background-color: #f3f4f6;
	padding: 20rpx 30rpx;
	font-size: 24rpx;
	display: flex;
	justify-content: space-between;

	.left {
		font-weight: bold;
	}

	.right {
		font-size: 22rpx;

		text {
			color: $u-type-warning;
			padding-left: 10rpx;
		}
	}
}
.content {
	margin-bottom: 150rpx;
}

.empty {
	margin-top: 50rpx;
}
.checkbox-group {
	background-color: #0086b3;
	.checkbox {
		background-color: #009926;
		width: 500rpx;
	}
}

.checkbox-item {
	width: 100%;
	.item {
		padding: 20rpx;
		.item-top {
			display: flex;
			.item-checkbox {
				width: 10%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.item-image {
				width: 20%;
				image {
					width: 120rpx;
					flex: 0 0 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 12rpx;
				}
			}
			.title-wrap {
				width: 70%;
				.title {
					text-align: left;
					font-size: 28rpx;
					color: $u-content-color;
					margin-top: 10rpx;
				}
				.price {
					color: $u-type-warning;
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 5rpx;
					.unit {
						font-size: 28rpx;
						font-weight: normal;
						padding-left: 8rpx;
					}
				}
			}
		}
		.item-bottom {
			.number-box {
				display: flex;
				justify-content: flex-end;
				margin: 10rpx 0;
			}
		}
	}
}
.foot-wrap {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	padding: 20rpx 0;
	position: fixed;
	width: 100%;
	bottom: -4rpx;
	/* #ifdef H5 */
	bottom: 100rpx;
	/* #endif */

	.left {
		width: 65%;
		text-align: right;
		padding-right: 30rpx;
		font-weight: bold;

		text {
			color: $u-type-error;
			padding: 0 20rpx;
		}
	}

	.right {
		width: 35%;
	}
}
</style>
